<template>
	<!-- 单个项目页面 -->
	<view class="projectItem2">
		<view class="iconSetting">
			<buttonSpreadVue :propsData="items" />
		</view>
		<view class="head">
			<view class="projectName">{{ items.name }}</view>
			<view class="prjectCreateUsers">创建人：{{ userName }}</view>
			<view class="profit">客户：{{ items.client }}</view>
			<view class="inputCost">合同金额（含税）：{{ items.investmentAmount }}</view>
			<view class="inputCost">合同（税额）：{{ items.investmentAmountTax }}</view>
			<view class="projectCost">
				材料成本(含税):
				<view class="projectCost2">{{ warehouseCost.toFixed(2) }}</view>
			</view>
			<view class="projectCost">
				材料成本（税额）:
				<view class="projectCost2">{{ items.purchaseContractTax }}</view>
			</view>
			<view class="projectCost">
				已收金额:
				<view class="projectCost2">{{ inputCost.toFixed(2) }}</view>
			</view>
			<view class="profit">毛利润：{{ profit.toFixed(2) }}</view>
			<view class="prjectCreateTime">创建时间：{{ createDate }}</view>
			<view class="introduce">项目介绍：{{ items.introduce }}</view>
			<!-- <view class="financialDetails">
				<button @click="toProjectDetails">资金明细</button>
			</view> -->
			<view class="financialDetails">
				<button @click="addProjectWareHouse">收款</button>
			</view>
		</view>
		<view class="body">
			<view class="prjectWarehouse">
				<view class="addProject">
					<button @click="addComponentPart">增加</button>
				</view>
				<view class="prjectWarehouseTitle">项目仓库:</view>
				<view class="storePart">
					<table>
						<tr>
							<td>编号</td>
							<td>名称</td>
							<td>数量</td>
							<td>单价</td>
							<td>价格</td>
						</tr>
						<tr class="storePart" v-for="(item, index) in tableItems" @click="toStockControl(item)">
							<td>
								<view class="serialNumber">{{ item.serialNumber }}</view>
							</td>
							<td>
								<view class="name">{{ item.name }}</view>
							</td>
							<td>
								<view class="number">{{ item.number }}</view>
							</td>
							<td>
								<view class="cost">{{ item.unitPrice }}</view>
							</td>
							<td>
								<view class="costSum">{{ item.costFront }}</view>
							</td>
						</tr>
					</table>
				</view>
			</view>
		</view>
		<view class="footer">底部</view>
	</view>
</template>

<script>
import { request } from '../../request';
import buttonSpreadVue from '../../components/buttonSpread/buttonSpread.vue';

export default {
	components: { buttonSpreadVue },
	computed: {
		profit() {
			return this.items.investmentAmount - this.warehouseCost;
		},
		// 已收金额
		inputCost() {
			return this.items.publicCollect + this.items.cashCollect;
		},
		// 总成本
		warehouseCost() {
			return this.items.publicCost + this.items.cashCost + this.items.credit + this.items.purchaseContractTax;
		}
	},
	data() {
		return {
			items: {},
			id: null,
			date: null,
			cost: null,
			// 注资金额
			users: null,
			// 后面传入状态可更改颜色
			input: null,
			output: null,
			name: null,
			// 项目介绍
			introduce: null,

			createDate: null,
			// 用户名
			userName: null,
			tableItems: []
		};
	},
	methods: {
		// 到组件页面
		toStockControl(item) {
			console.log(item);
			uni.navigateTo({
				url: `/pages/stockControl/componentsPart?id=${item.id}`
			});
		},
		// 页面设置
		iconSetting() {
			console.log('页面设置');
			// uni.
		},
		// 收款
		addProjectWareHouse() {
			uni.navigateTo({
				url: `/pages/project/payProjectWareHouse?id=${this.id}&name=${this.name}`
			});
		},
		toProjectDetails() {
			uni.navigateTo({
				url: '/pages/project/projectDetails'
			});
		},
		addComponentPart() {
			uni.navigateTo({
				url: `/pages/inStorage/inStorage?project=${this.id}`
			});
		}
	},
	onLoad(item) {
		this.id = item.id;
		this.users = item.users;
		this.userName = null;

		// 获取用户信息
		request('public/selectUserById', { id: item.users }, 'GET').then((res) => {
			this.userName = res.data.data.name;
		});
	},
	onShow() {
		// 加载项目具体信息
		request('public/selectProjectById', { id: this.id }, 'GET').then((res) => {
			this.items = res.data.data;
			this.createDate = new Date(res.data.data.createTime).toISOString().split('T')[0];
		});
		// 获取所有与项目相关元器件信息
		request('public/selectByProjectToComponent', { projectId: this.id }, 'GET').then((res) => {
			this.tableItems = res.data.data;
			console.log(res);
		});
	}
};
</script>

<style scoped>
page {
	display: flex;
	justify-content: center;
	align-items: center;
}
/* 项目项容器 */
.projectItem2 {
	width: 650rpx;
	max-width: 650rpx;
	margin: 20px auto;
	padding: 25px;
	background-color: white;
	/* background: linear-gradient(145deg, #ffffff, #f5f5f5); */
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	position: relative;
	overflow: hidden;
}

/* 装饰元素 */
.projectItem2::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, #409eff, #67c23a);
}
#buttonSpreadVue2 {
	width: 30rpx;
}
/* 设置图标 */
.iconSetting {
	width: 60rpx;
	height: 60rpx;
	position: absolute;
	z-index: 99;
	margin: 0 0 0 570rpx;
}
.iconSetting img {
	width: 60rpx;
	height: 60rpx;
}

/* 头部信息 */
.head {
	padding-bottom: 20px;
	border-bottom: 1px solid #e6e6e6;
	margin-bottom: 20px;
}

.addProject {
	position: absolute;

	margin: -10rpx 0 0 500rpx;
}
.addProject button {
	width: 150rpx;
	height: 70rpx;
	font-size: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 0;
	background-color: white;
	box-shadow: 5rpx 5rpx 10rpx #b6b6b6;
}

.projectName {
	font-size: 24px;
	font-weight: 600;
	color: #303133;
	margin-bottom: 15px;
	text-align: center;
	position: relative;
	padding-bottom: 10px;
}

.projectName::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 2px;
	background-color: #409eff;
	border-radius: 1px;
}

.data-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	margin-top: 20px;
}

.inputCost,
.projectCost,
.profit,
.projectInput,
.projectOutput,
.prjectCreateTime,
.prjectCreateUsers,
.introduce {
	font-size: 15px;
	color: #606266;
	margin-bottom: 0;
	display: flex;
	align-items: center;
	background-color: #fafafa;
	padding: 10px 15px;
	border-radius: 8px;
}

.inputCost::before,
.projectCost::before,
.profit::before,
.projectInput::before,
.projectOutput::before,
.prjectCreateTime::before,
.prjectCreateUsers::before,
.introduce::before {
	content: '';
	display: inline-block;
	width: 3px;
	height: 15px;
	background-color: #409eff;
	margin-right: 10px;
	border-radius: 1px;
}

.introduce {
	grid-column: 1 / -1;
	min-height: 60px;
	align-items: flex-start;
}

.projectCost2,
.projectInput2,
.projectOutput2 {
	color: #303133;
	font-weight: 500;
	margin-left: 5px;
}

.financialDetails {
	margin: 20px 0;
	text-align: center;
}

.financialDetails button {
	background: linear-gradient(135deg, #409eff, #3a8ee6);
	color: white;
	border: none;
	border-radius: 20px;
	padding: 8px 25px;
	font-size: 15px;
	cursor: pointer;
	transition: all 0.2s;
	box-shadow: 0 5px 15px rgba(64, 158, 255, 0.2);
}

.financialDetails button:hover {
	box-shadow: 0 5px 20px rgba(64, 158, 255, 0.3);
	transform: translateY(-1px);
}

/* 主体内容 */
.body {
	padding: 15px 0;
}

.prjectWarehouse {
	font-size: 18px;
	font-weight: 500;
	color: #303133;
	margin-bottom: 15px;
	text-align: center;
}
.prjectWarehouseTitle {
	margin-bottom: 30rpx;
}

.prjectWarehouseTitle::before {
	content: '';
	display: inline-block;
	width: 3px;
	height: 18px;
	background-color: #67c23a;
	margin-right: 10px;
	border-radius: 1px;
}

table {
	border-collapse: collapse;
	background-color: white;
}

tr {
	transition: background-color 0.2s;
	border-bottom: 1px solid #f2f2f2;
}

tr:first-child {
	background-color: white;
	color: #000;
	font-size: 32rpx;
	font-weight: 500;
	position: sticky;
	top: 0;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
	display: none;
}

td {
	text-align: center;
	white-space: nowrap;
	overflow: scroll;
	text-overflow: ellipsis;
	padding: 20rpx;
}

td:nth-child(1) {
	max-width: 90rpx;
}

td:nth-child(2) {
	max-width: 90rpx;
}

td:nth-child(3) {
	width: 20%;
}

td:nth-child(4) {
	width: 30%;
}

.serialNumber,
.name,
.number,
.cost {
	font-size: 13px;
	color: #606266;
}

.costSum::before {
	content: '￥';
}

.costSum {
	font-size: 13px;
	color: #dd9e0c;
}

tr:first-child .serialNumber {
	overflow: hidden;
}
tr:first-child .name,
tr:first-child .number,
tr:first-child .cost {
	color: #b6b6b6;
	font-weight: 500;
}

/* 底部 */
.footer {
	padding-top: 15px;
	border-top: 1px solid #e6e6e6;
	text-align: center;
	font-size: 13px;
	color: #909399;
	margin-top: 20px;
}
</style>
